html,body,div,section,ul,li{
    margin: 0;
    padding: 0;
    outline: 0;
}
ul,li{
    list-style: none;
}

.wrapper{
    max-width: 500px;
    height: 500px;
    margin: 0 auto;
}
.info{
    display: flex;
    justify-content: space-around;
    color: #4384c2;
}

.questionBox h4,
.questionBox p{ text-align: center;}
.title{
    text-align: center;
}
.playing::before{
    content: '';
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #73b7f7;
    animation: scale .3s linear infinite;
}
@-webkit-keyframes scale{
    0%  {transform: scale(1);}
    100%{transform: scale(1.1);}
}
@keyframes scale{
    0%  {transform: scale(1);}
    100%{transform: scale(1.1);}
}
.choise{
    width: min-content;
    white-space: nowrap;
    margin: 0 auto;
}

.buttonBox{
    width: min-content;
    white-space: nowrap;
    margin: 0 auto;
}
.buttonBox button{
    padding: 5px 15px;
    border: 1px solid rgb(1, 102, 1);
    border-radius: 5px;
    color: #fff;
    background: rgb(10, 161, 10);
    cursor: pointer;
}

/* charts */
#charts{ background: #fff; }
.chart{
    width: 60%;
    min-height: 300px;
	height: 65vh;
	margin: 0 auto;
}
.chart > * { width: 100%; }
.btnBox{
    margin: 0 auto;
    width: 70%;
    display: flex;
    justify-content: space-around;
}
.btn{
    margin: 5px auto;
	padding: 5px 25px;
	border: 0;
	border-radius: 5px;
	color: #fff;
	cursor: pointer;
    background: #78b9f7;
}
.reset {
    border-color: rgb(185, 3, 3);
    background: rgb(219, 3, 3);
}